<template>
  <div>
    <commhead-2 name="地址编辑"/>
    <div class="container">
      <van-form @submit="onSubmit">
        <van-field
          v-model="content.linkMan"
          name="linkMan"
          label="用户名"
          placeholder="用户名"
        />
        <van-field
          v-model="content.mobile"
          name="mobile"
          label="电话"
          placeholder="用户名"
        />
        <van-field
          readonl
          label="地区"
          :value="provincecity"
          placeholder="选择省/市/区"
          @click-input='show=true'
        />
        <van-field
          v-model="content.address"
          name="address"
          label="详细地址"
          placeholder="接到门牌、楼层"
        />
        <van-field
          v-model="content.code"
          name="code"
          label="邮政编码"
          placeholder="邮政编码"
        />
        <van-cell center title="设置默认地址" class="">
          <template #right-icon>
            <van-switch v-model="content.isDefault" size="24" />
          </template>
        </van-cell>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <van-button type="danger"  round class="pad_20" @click="deltenote">删除</van-button>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <van-area
          title="亲选择"
          :area-list="areaList"
          @confirm="chhosed"
          @cancel="show=false"
        />
      </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import Commhead2 from '../../components/Commhead2.vue'
import { getContactInfo, updateAddress, delContact } from '_api'
import { getToken } from '_utils'
import { Toast, Dialog } from 'vant'
export default {
  data () {
    return {
      areaList,
      content: {
        address: '', // 详细信息
        cityId: '', // 城市id
        linkMan: '',
        mobile: '',
        provinceId: '', // 省份id
        code: '',
        isDefault: false
      },
      show: false,
      provincecity: ''
    }
  },
  created () {
    this.getContactInfo()
  },
  methods: {
    // 删除
    deltenote () {
      Dialog.confirm({
        title: '删除',
        message: '确认删除吗？'
      })
        .then(() => {
          delContact({
            token: getToken(),
            id: this.$route.query.id
          }).then(res => {
            if (res.data.code === 0) {
              Toast({
                type: 'success',
                duration: 1000,
                message: '修改成功',
                onClose: () => {
                  this.$router.go(-1)
                }
              })
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    onSubmit () {
      // console.log(this.content)
      updateAddress({
        ...this.content,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast({
            type: 'success',
            duration: 1000,
            message: '修改成功'
          })
        }
      })
    },
    // 获取单个收货详情
    getContactInfo () {
      getContactInfo({
        token: getToken(),
        id: this.$route.query.id
      }).then(res => {
        console.log(res.data.data.info)
        this.content = { ...res.data.data.info }
        this.provincecity = res.data.data.info.provinceStr
      })
    },
    chhosed (data) {
      this.show = false
      this.content.cityId = data[1].code
      this.content.provinceId = data[0].code
      this.provincecity = data[0].name + '/' + data[1].name + '/' + data[2].name
    }
  },
  components: { Commhead2 }
}
</script>

<style lang="scss" scoped>
.container{
  padding: 0 20px;
  padding-top: 44px;
  display: flex;
  flex-direction: column;
}
/deep/.van-cell__title{
  text-align: left;
}
.pad_20{
  margin: 0 15px;
}
</style>
